<template>
<div>
  <Breadcrumb :items="['系统管理', '权限与菜单管理']" />
  <a-card class="general-card" title="权限与菜单管理">
    <template #extra>
      <a-space direction="horizontal" :size="18">
        <a-button v-authorities="[SYS_PM.SYS_AUTHORITY_READ]" type="primary" :loading="loading" @click="refresh">
          <template #icon>
            <icon-refresh />
          </template>
          刷新
        </a-button>
      </a-space>
    </template>
    <!--分割线-->
    <a-divider direction="horizontal" />
    <a-row style="margin-bottom: 16px">
      <a-col :span="16">
        <a-space>
          <a-button v-authorities="[SYS_PM.SYS_AUTHORITY_WRITE]" type="primary" @click="onCreate">
            <template #icon>
              <icon-plus />
            </template>
            添加
          </a-button>
        </a-space>
      </a-col>
      <a-col :span="8" style="text-align: right">
        <a-space>
          <table-column-setting v-model:columns="columns" />
        </a-space>
      </a-col>
    </a-row>

    <a-table
      :columns="columns"
      :data="tbData"
      :loading="loading"
      row-key="id"
      :pagination="false"/>

    <authority-drawer ref="authorityDrawer" @refresh="refresh"/>
  </a-card>
</div>
</template>

<script setup lang="tsx">
import { onMounted, ref, h, resolveComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import AuthorityDrawer from '@/views/system/authority/components/authority-drawer.vue'
import TableColumnSetting from "@/components/table/table-column-setting.vue";
import useLoading from '@/hooks/loading'
import { deleteById, treeList } from '@/api/modules/system/authority'
import type { AuthorityVo } from '@/types/modules/system'
import { SYS_PM } from '@/types/PM'
import type { TableColumnData } from "@arco-design/web-vue";

const columns = ref<TableColumnData[]>([{
  title: "资源名称",
  dataIndex: "title",
  width: 180,
  fixed: "left"
},{
  title: '图标',
  dataIndex: 'icon',
  width: 100,
  render: ({ record }: { record: any }) => {
    if (record.meta && record.meta.icon)
      return h(resolveComponent(record?.meta?.icon))
    return <span/>
  }
}, {
  title: '资源类型',
  dataIndex: 'type',
  width: 100,
  render: ({ record }: { record: any }) => {
    if(record.type) {
      return <a-tag color="arcoblue" bordered={true}>权限</a-tag>
    }
    return  <a-tag color="gray" bordered={true}>菜单</a-tag>
  }
},{
  title: '资源编码',
  dataIndex: 'name',
  width: 180,
}, {
  title: '路由',
  dataIndex: 'path',
  width: 200
},{
  title: '缓存',
  dataIndex: 'cache',
  width: 100,
  render: ({ record }: { record: any }) => {
    if(record.type) {
      return <span></span>
    }
    if (record.meta && record.meta.cache) {
      return <a-tag color="arcoblue" bordered={true}>开启</a-tag>
    }
    return  <a-tag color="gray" bordered={true}>关闭</a-tag>
  }
}, {
  title: "操作",
  width: 220,
  align: "right",
  fixed: "right",
  dataIndex: "operation",
  render: ({ record }: { record: any }) => {
    return <>
      <a-button v-authorities={Array.of(SYS_PM.SYS_AUTHORITY_READ)} type="text" size="small" onClick={() => onPreview(record.id)}>
        预览
      </a-button>
      <a-button v-authorities={Array.of(SYS_PM.SYS_AUTHORITY_WRITE)} type="text" size="small" onClick={() => onUpdate(record.id)}>
        编辑
      </a-button>
      <a-popconfirm content={`确定删除 '${record.name}' 吗?`} type="warning" onOk={() => onDelete(record.id)}>
        <a-button v-authorities={Array.of(SYS_PM.SYS_AUTHORITY_WRITE)} type="text" size="small" status="danger">
          删除
        </a-button>
      </a-popconfirm>
    </>
  }
}])
const tbData = ref<AuthorityVo[]>([]);
const authorityDrawer = ref<any>()
const { loading, setLoading } = useLoading();
const refresh = async () => {
  setLoading(true)
  tbData.value = (await treeList()).data
  setLoading(false)
}
const onCreate = async () => {
  setLoading(true)
  await authorityDrawer.value.createHandle()
  setLoading(false)
}

const onPreview = async (id: number) => {
  setLoading(true)
  await authorityDrawer.value.previewHandle(id)
  setLoading(false)
}

const onUpdate = async (id: number) => {
  setLoading(true)
  await authorityDrawer.value.updateHandle(id)
  setLoading(false)
}

const onDelete = async (id: number) => {
  setLoading(true)
  try {
    await deleteById(id)
  } finally {
    await refresh()
    setLoading(false)
  }
}

onMounted(() => {
  refresh()
})
</script>

<script lang="tsx">
export default {
  name: 'Authority',
};
</script>

<style scoped>

</style>
